<template>
<div>
<div ref="aboutUs" id="aboutUs"></div>
</div>
  
</template>

<script>
import E from 'wangeditor'
var phoneEditor, _this
export default {
  components: {},
  props: {
    aboutUsVal: {
      type: String,
      required: false
    },
    writeable:{
      type:Boolean,
      value:true
    }
  },
  data () {
    return {}
  },
  created () {},
  mounted () {
    _this = this
    _this.aboutUs=_this.aboutUsVal
    phoneEditor = new E(_this.$refs.aboutUs)
    phoneEditor.customConfig.pasteFilterStyle = false
    // this.editor.customConfig.uploadImgShowBase64 = true
    phoneEditor.customConfig.onchange = html => {
      _this.$emit('aboutUs', html)
    }

    // phoneEditor.customConfig.pasteTextHandle = function (content) {
    //   // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
    //   if (content == '' && !content) return ''
    //   var str = content
    //   str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
    //   str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
    //   str = str.replace(/<\/?[^>]*>/g, '')
    //   str = str.replace(/[ | ]*\n/g, '\n')
    //   // str = str.replace(/&nbsp;/ig, '')
    //   console.log('****', content)
    //   console.log('****', str)
    //   return str
    // }

    phoneEditor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      // 'link', // 插入链接
      // 'list', // 列表
      'justify', // 对齐方式
      // 'quote', // 引用
      // 'emoticon', // 表情
      // 'image', // 插入图片
      'table', // 表格
      // 'video', // 插入视频
      // 'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]
   
    phoneEditor.create()
    // console.log(_this.$refs)
     phoneEditor.txt.html(_this.aboutUs)
       phoneEditor.$textElem.attr('contenteditable', this.writeable)
  },
  methods: {},
  computed: {},
  watch: {
    aboutUsVal (val) {
      // console.log(val)
      phoneEditor.txt.html(val)
     phoneEditor.txt.html(val)
    },
  }
}
</script>

<style lang="scss" scoped>
#aboutUs {
  width: 100%;
  height: 250px !important;
  font-family: "宋体" !important;
}
</style>
